<!--
 * @Author: 赵宇
 * @Description: 自定义按钮组件，是希望减少可复用的代码。比如tooltip的功能
 * @Date: 2023-02-01 11:11:24
 * @LastEditTime: 2023-04-18 15:08:07
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \pcj\src\components\z-input\index.vue
-->
<template>
  <el-input v-model="number.value" @blur="onChange" @click.stop :placeholder="placeholder"></el-input>
</template>

<script setup>
let props = defineProps({
  placeholder: {
    // 占位符
    type: String,
    default: '请输入'
  },
  modelValue: {
    // 传值
    type: Number,
    default: 0
  },
  autofocus: {
    type: Boolean,
    default: false
  },
  max: {
    type: Number,
    default: 2
  }
});
let number = reactive({
  value: ''
});
watch(
  () => props.modelValue,
  val => {
    number.value = val;
  },
  {
    immediate: true
  }
);
let emit = defineEmits(['update:modelValue', 'change']);

const onChange = val => {
  val = number.value + '';
  val = parseFloat(val.replace(eval(`/([0-9]+.[0-9]{${props.max}})[0-9]*/`), '$1')) || 0;
  number.value = val;
  emit('update:modelValue', val);
  emit('change', val);
};
</script>

<style lang="scss" scoped></style>
